<template>
  <div class="myFollowee">
    <h3 class="title">我的关注</h3>
    <hr>
<!--    <el-card class="box-card overflower"  v-if="followees.length">
  <div v-for="(followee,index) in followees" class="text item">
    <el-tooltip class="item" effect="dark" content="查看详情" placement="top-start">
        <router-link :to="{ name: 'User', params: { id: followee.id } }">好友昵称：{{ followee.get('username') }}</router-link>
    </el-tooltip>
  </div>
</el-card>-->
    <ul class="list-group overflower"  v-if="followees.length" >
      <li class="list-group-item" v-for="(followee,index) in followees">
        <span class="badge" >{{index}}</span>
        <el-tooltip class="item" effect="dark" content="查看详情" placement="top-start">
        <router-link :to="{ name: 'User', params: { id: followee.id } }">
         <span
           class="user-img"
           v-if="followee.get('user_img')"
           :style="{ backgroundImage: 'url(' + followee.get('user_img').get('url') + ')'}">
        </span>
          <span  v-else>
            <i class="fa fa-user-circle-o  fa-2x" aria-hidden="true"></i>
          </span>
          <span class="text">用户昵称：{{ followee.get('username') }}</span>

        </router-link>
        </el-tooltip>
      </li>
    </ul>

    <span v-else>你暂时没有关注任何人</span>

  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {

  name: 'myFollowee',

  data () {
    return {
      followees: []
    };
  },
  computed: mapState(['user']),
  mounted(){
    this.getFollowee();
  },
  methods: {
    getFollowee(){
      const q = this.user.followeeQuery();
      q.include('followee');
      q.find().then((followees) => {
        this.followees = followees;
        this.$Progress.finish()
      }).catch((err) => {
        this.$message.error(err);
      })
    }
  }


};
</script>

<style lang="less" scoped>
/*@import '~assets/global.css'*/
  .myFollowee{
    width:90%;
    margin: 0 auto;
    text-align: center;
    .title{
      margin-top: 40px;
    }
    .user-img{
      display: inline-block;
      width: 45px;
      height: 45px;
      border-radius: 50%;
      background-size: cover;
      box-shadow: 0 0 1px #55acee;
    }
  }
  .overflower{
    text-align: left;
  }
  .text{
    align-items: flex-start;
  }
</style>
